<template>
	<uni-forms ref="valiFormRef" :rules="rules" :modelValue="valiFormData" label-position="top">
		<uni-forms-item label="记录时间"  name="time">
			<uni-datetime-picker type="datetime" v-model="valiFormData.time" :clear-icon="false"/>
		</uni-forms-item>
		<uni-forms-item label="接种疫苗名称"  name="name">
			<uni-easyinput v-model="valiFormData.name" placeholder="请输入接种疫苗名称" />
		</uni-forms-item>
		<uni-forms-item label="备注" name="remark">
			<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
		</uni-forms-item>
		<uni-forms-item label="上传图片" name="file">
			<uni-file-picker limit="9" 
				@select="select"  
				@delete="deleteFn" 
				v-model="valiFormData.file" 
			title="最多选择9张图片"></uni-file-picker>
		</uni-forms-item>
	</uni-forms>
</template>

<script setup>
	import {reactive,ref,computed} from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
	import {getHistoryDataById} from '@/utils/index.js'
	// 校验规则
	const rules= {
		name: {
			rules: [{
				required: true,
				errorMessage: '接种疫苗名称不能为空'
			}]
		},
		time: {
			rules: [{
				required: true,
				errorMessage: '时间不能为空'
			}]
		}
	}
	
	const imgPath = ref('')
	
	const valiFormData= reactive({
		time: '',
		name: '',
		remark: '',
		file: [{
			url:'blob:http://localhost:3000/567031f4-5008-47b0-a1fe-7f1c63a6c8fa'
		}]
	})
	
	
	
	
	onLoad((options)=>{
		console.log(options,'组件内');
		if(options.id){
			let data = getHistoryDataById(options.id)
			console.log(data);
			Object.keys(valiFormData).forEach((key)=>{
				valiFormData[key] = data[key]
			})
		}else{
			valiFormData.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
		}
	})
	
	
	
	const select =(event)=>{
		console.log(event,'文件',process.env.UNI_PLATFORM);
		const tempFilePath = event.tempFiles[0].path; // 获取临时文件路径
		console.log(tempFilePath,'文件');
		imgPath.value = tempFilePath
		uni.setStorageSync('cachedImagePath', tempFilePath);
		//   // 将图片转换为 Base64 编码
		//   uni.getFileSystemManager().readFile({
		//     filePath: tempFilePath,
		//     encoding: 'base64',
		//     success: function (resBase64) {
		//       const base64Data = resBase64.data;
		
		//       // 保存 Base64 数据到本地缓存
		//       try {
		//         uni.setStorageSync('cachedImage', base64Data);
		//         console.log("图片已成功保存到缓存");
		
		//         // 更新页面上的图片预览
		//         cachedImage.value = `data:image/png;base64,${base64Data}`;
		//       } catch (e) {
		//         console.error("保存图片到缓存失败:", e);
		//       }
		//     },
		//     fail: function (err) {
		//       console.error("图片转换为 Base64 失败:", err);
		//     }
		//   });
		
	} 
	
	const deleteFn =(e)=>{
		console.log(e,'删除');
	} 
	
	
	
	
	
	const valiFormRef = ref(null)
	
	const submit = ()=>{
		console.log('触发校验',valiFormRef.value,valiFormData);
		return new Promise((resolve,reject)=>{
			valiFormRef.value.validate().then(res => {
				console.log('success', res);
				resolve({
					...res,
				})
				uni.showToast({
					title: `校验通过`
				})
			}).catch(err => {
				reject(err)
				console.log('err', err);
			})
		})
		
	}
	
	defineExpose({
		submit
	})
	
	
</script>

<style>
</style>